<template>
	<view v-if="visibleSync" :class="{ 'uni-drawer--visible': showDrawer }" class="uni-drawer"
		@touchmove.stop.prevent="clear">
		<view class="uni-drawer__mask" :class="{ 'uni-drawer__mask--visible': showDrawer && mask }"
			@tap="close('mask')" />
		<view class="uni-drawer__content"
			:class="{'uni-drawer--right': rightMode,'uni-drawer--left': !rightMode, 'uni-drawer__content--visible': showDrawer}"
			:style="{width:drawerWidth+'px;height: 100vh;'}">
			<view class="banmi_flex a-c j-c" style="height: 60px;">
				<text style="font-size: 17px;font-weight: 800;color: #fff;">半米管理系统</text>
			</view>
			<scroll-view scroll-y="true" style="height: 100vh;" show-scrollbar="false">
			<view class="" v-for="(item,index) in menu_list" :key="index" v-if="item.parent_id==0||item.expand==true">
				<button :class="mane_index==index?'banmi_menu_selected':'banmi_menu'"
					:style="item.parent_id!=0 ? 'background-color: #696969;' :'' " @click="on_tab(index,item.url)">
					<view class="banmi_flex  " style="align-items: center;height: 50px;">
						<icon-park v-if="item.icon" :type="item.icon" theme="outline"
							style="font-size: 18px;margin-top: 5px;" />
						<view  class="yihang" style="font-size: 16px;margin-left: 5rpx;">
							{{item.menu_name}}
						</view>
					</view>
					<view v-if="item.children&&item.children.length>0" class="" style="margin-top: 10rpx;">
						<icon-park :type="item.right" theme="outline" style="font-size: 18px;" />
					</view>
				</button>
			</view>
			<view class="" style="height: 300px;">
			
			</view>
			</scroll-view>
		</view>
		
		<!-- #ifdef H5 -->
		<keypress @esc="close('mask')" />
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef H5
	import keypress from './keypress.js'
	// #endif
	/**
	 * Drawer 抽屉
	 * @description 抽屉侧滑菜单
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=26
	 * @property {Boolean} mask = [true | false] 是否显示遮罩
	 * @property {Boolean} maskClick = [true | false] 点击遮罩是否关闭
	 * @property {Boolean} mode = [left | right] Drawer 滑出位置
	 * 	@value left 从左侧滑出
	 * 	@value right 从右侧侧滑出
	 * @property {Number} width 抽屉的宽度 ，仅 vue 页面生效
	 * @event {Function} close 组件关闭时触发事件
	 */
	import {
		IconPark
	} from '@icon-park/vue/es/all';
	import {
		fromJSON
	} from 'tough-cookie';
	export default {
		name: 'UniDrawer',
		components: {
			IconPark,
			// #ifdef H5
			keypress
			// #endif
		},
		emits: ['change'],
		props: {
			/**
			 * 显示模式（左、右），只在初始化生效
			 */
			mode: {
				type: String,
				default: ''
			},
			/**
			 * 蒙层显示状态
			 */
			mask: {
				type: Boolean,
				default: true
			},
			/**
			 * 遮罩是否可点击关闭
			 */
			maskClick: {
				type: Boolean,
				default: true
			},
			/**
			 * 抽屉宽度
			 */
			width: {
				type: Number,
				default: 220
			}
		},
		data() {
			return {
				visibleSync: false,
				showDrawer: false,
				rightMode: false,
				watchTimer: null,
				drawerWidth: 220,
				menu_list: [],
				mane_index: 0
			}
		},
		created() {
			this.top_list = [];
			// #ifndef APP-NVUE
			this.drawerWidth = this.width
			// #endif
			this.rightMode = this.mode === 'right'
		},
		methods: {
			on_tab(index, url) {

				var num = this.menu_list[index]['children'].length
				var id = this.menu_list[index]['menu_id'];
				if (num == 0) { //没有二级列表
					this.mane_index = index;

					var parent_id = this.menu_list[index]['parent_id'];
					var plugin_id = this.menu_list[index]['plugin_id'];

					var url_local = this.menu_list[index]['url_local']

					if (url_local == 1) {
						url = '/pages/banmi/admin_plugin_view';
					}
					if (url.indexOf("?") != -1) {
						var url = url + '&id=' + id
					} else {
						var url = url + '?id=' + id
					}

			

					uni.navigateTo({
						url: url
					})
					//顶部已打开的导航
					var type = 0;
					for (var i = 0; i < this.top_list.length; i++) {
						if (this.top_list[i]['menu_id'] == id) {
							var type = 1;
						}
					}
					if (type == 0) {
						this.top_list.push(this.menu_list[index]);
					}
					 

					uni.$emit('banmi_top', {
						top_list: this.top_list,
						top_id: id,
						find: this.menu_list[index]
					});
					this.close();
					return
				}

				var parent_id = this.menu_list[index]['menu_id'];
		 
				for (var i = 0; i < this.menu_list.length; i++) {
					if (this.menu_list[i]['parent_id'] == parent_id) {
						this.menu_list[i]['expand'] = !this.menu_list[i]['expand']
						 
					}
				}

				if (this.menu_list[index]['right']=='right') {
					this.menu_list[index]['right'] = 'down';
				} else {
					this.menu_list[index]['right'] = 'right';
				}

				this.$forceUpdate()
				return




			},
			data_processing(menu_list, menu_list1) {
				 
				var that = this;
				var top_id = 0;
				var menu_id = 0
				var find = {};
				that.top_list.push(menu_list[0]);
				
				 
				for (var i = 0; i < menu_list1.length; i++) {
					if (menu_list1[i]['url'] == this.route_path) {
						top_id = menu_list1[i]['parent_id']
						menu_id = menu_list1[i]['menu_id']
						if (i != 0) {
							that.top_list.push(menu_list1[i]);
						}

					}
					if (menu_list1[i]['list'].length > 0) {
						for (var k = 0; k < menu_list1[i]['list'].length; k++) {
							menu_list1[i]['list'][k]['list'] = [];
							if (menu_list1[i]['list'][k]['url'] == this.route_path) {
								top_id = menu_list1[i]['parent_id']
								
							}
							menu_list.splice(i + 1, 0, menu_list1[i]['list'][k]);
						}
					}
				}

				if (this.route_path) {
					
					for (var i = 0; i < menu_list.length; i++) {
						if (top_id == menu_list[i]['menu_id']) {
							menu_list[i]['expand'] = true;
						}
						if (menu_list[i]['parent_id'] == top_id) {
							menu_list[i]['expand'] = true
						}
						if (menu_list[i]['url'] == this.route_path) {
							this.mane_index = i;
						}
					}
				} else {
					menu_id = menu_list[0]['menu_id']
					this.mane_index = 0;
				}
				uni.$emit('banmi_top', {
					top_list: that.top_list,
					top_id: menu_id,
					find: that.top_list[0]
				});
				this.menu_list = menu_list;

			},
			clear() {},
			close(type) {
			
				// fixed by mehaotian 抽屉尚未完全关闭或遮罩禁止点击时不触发以下逻辑
				if ((type === 'mask' && !this.maskClick) || !this.visibleSync) return
				this._change('showDrawer', 'visibleSync', false)
			},
			open() {

				// fixed by mehaotian 处理重复点击打开的事件
				if (this.visibleSync) return

				if (this.menu_list.length == 0) {
					this.menu_list = uni.getStorageSync('menu_list');
				}



				this._change('visibleSync', 'showDrawer', true)
			},
			_change(param1, param2, status) {

				this[param1] = status

				if (this.watchTimer) {
					clearTimeout(this.watchTimer)
				}

				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit('change', status)
				}, status ? 50 : 300)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$uni-mask: rgba($color: #000000, $alpha: 0.4);
	// 抽屉宽度
	$drawer-width: 220px;

	.banmi_menu_back {
		background-color: #B631BB;
	}

	button::after {
		border: none;
	}

	button {
		border-radius: 0;
	}

	button {
		background-color: #000;
	}

	.banmi_menu_selected {
		display: flex !important;
		justify-content: space-between;
		padding: 0px 10px;
		height: 50px;
		background-color: #1E90FF !important;
		color: #fff;
		align-items: center !important;
	}

	.banmi_menu {
		padding: 0px 10px;
		display: flex;
		justify-content: space-between;
		align-items: center !important;
		color: #fff;
		height: 50px;
	}

	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		z-index: 999;
	}

	.uni-drawer__content {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		top: 0;
		width: $drawer-width;
		bottom: 0;
		background-color: #000;
		transition: transform 0.3s ease;
	}

	.uni-drawer--left {
		left: 0;
		/* #ifdef APP-NVUE */
		transform: translateX(-$drawer-width);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX(-100%);
		/* #endif */
	}

	.uni-drawer--right {
		right: 0;
		/* #ifdef APP-NVUE */
		transform: translateX($drawer-width);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX(100%);
		/* #endif */
	}

	.uni-drawer__content--visible {
		transform: translateX(0px);
	}


	.uni-drawer__mask {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: $uni-mask;
		transition: opacity 0.3s;
	}

	.uni-drawer__mask--visible {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		opacity: 1;
	}
</style>